<template>
	<view class="ui-divider">
		<view class="ui-divider__line" :style="{ background: lineColor, width }"></view>

		<view
			class="ui-divider__text"
			:style="{
				backgroundColor
			}"
		>
			<slot></slot>
		</view>
	</view>
</template>

<script>
import { isArray } from '../../utils';

export default {
	props: {
		backgroundColor: {
			type: String,
			default: '#fff'
		},

		color: {
			type: [String, Array],
			default: '#dcdfe6'
		},

		width: {
			type: String,
			default: '100%'
		}
	},

	computed: {
		lineColor() {
			if (isArray(this.color)) {
				const [a, b] = this.color || [];
				return `linear-gradient(to right, ${a}, ${b}, ${b}, ${a})`;
			} else {
				return this.color;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.ui-divider {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80rpx;
	width: 100%;
	position: relative;
	text-align: center;
	box-sizing: border-box;

	&__line {
		position: absolute;
		height: 1rpx;
		top: 50%;
		left: 50%;
		transform: scaleY(0.5) translateX(-50%) translateZ(0);
	}

	&__text {
		position: absolute;
		left: 50%;
		padding: 0 30rpx;
		color: #303133;
		font-size: 26rpx;
		transform: translateX(-50%);
	}
}
</style>